<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>可拖拽排序的人物列表</title>
    <link rel="stylesheet" href="193.css">
</head>

<body>
    <div class="list">
        <!-- --color是自定义属性 -->
        <div class="list-item" draggable="true" style="--color:#b01a01;">
            <img src="/images/op/1.jpg" alt="">
            <span>路飞</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#70d265;">
            <img src="/images/op/2.jpg" alt="">
            <span>索隆</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#f0e941;">
            <img src="/images/op/3.jpg" alt="">
            <span>山治</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#da8218;">
            <img src="/images/op/4.jpg" alt="">
            <span>娜美</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#f1e867;">
            <img src="/images/op/5.jpg" alt="">
            <span>乌索普</span>
        </div>
    </div>
</body>

</html>

<script src="193.js"></script>